<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    object:{a:'apple',b:'banana',c:'orange'},
                    json:[
                        {name:'张三',age:'18'},
                        {name:'李四',age:'28'}
                    ]
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}   {{$index}}
            </li>
        </ul>

        <hr>
        <select>
            <option v-for="(k,v) in object" :title="$key">
                {{$index}}   {{k}}   {{v}}     {{$key}}
            </option>
        </select>

        <hr>
        <table>
            <tr v-for="value in json">
                <td>{{$index+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.age}}</td>
                <td>{{$key}} </td>
            </tr>
        </table>
    </div>
</body>
</html>



















